<!-- axios -->
<template>
  <div>
    <!-- 按钮绑定了鼠标单击事件 -->
    <input type="button" value="获取远程数据" @click="sendReq" />
  </div>
</template>
<script>
// 导入自己创建的axios
import axios from "../util/myaxios";
const options = {
  methods: {
    async sendReq() {
      // 使用 axios 发送 get 请求，返回 Promise 对象
      // const resp = await axios.get('api/students'); // 配置了代理，只要 api 请求通过代理发送

      // 1. 演示 get，post
      // const resp = await axios.post('api/a2');

      // 2. 发送请求头
      // const resp = await axios.post('api/a3', {}, {
      //   headers: {
      //     Authorization: 'abc'
      //   }
      // });

      // 3. 发送请求时携带查询参数
      // const name = encodeURIComponent('&&&');// 带特殊字符可以进行编码
      // const age = 19;
      // const resp = await axios.post(`api/a4?name=${name}&age=${age}`);

      // const resp = await axios.post('api/a4', {}, {
      //   params: {
      //     name: '&&&&',
      //     age: 20
      //   }
      // });

      // 4. 用请求体发送数据，格式为 urlencoded
      // const params = new URLSearchParams();
      // params.append("name", "张三");
      // params.append("age", 19);

      // const resp = await axios.post("api/a4", params);

      // 5. 用请求体发送数据，格式为 multipart
      // const params = new FormData();
      // params.append("name", "李四");
      // params.append("age", 20);

      // const resp = await axios.post('api/a4', params);

      // 6. 用请求体发送数据，格式为 json
      // const resp = await axios.post("api/a5json", {
      //   name: "王武",
      //   age: 40,
      // });

      // 7. 更改 axios 默认配置
      // const _axios = axios.create({
      //   baseURL: "http://localhost:8080", // 将http://localhost:8080加在 url 前面
      //   withCredentials: true, // 跨域时是否携带 Cookie 等凭证，默认为 false
      // });

      // await _axios.post('api/a6set')
      // await _axios.post('api/a6get')

      // 8. 响应格式
      // const resp = _axios.post("api/students"); // 请求方式错误，报 405 状态码
      // const resp = _axios.get('api/students2'); // 请求路径错误，报 404 状态码

      // console.log(resp);

      // 9. 拦截器
      
      const resp = await axios.get('api/students');
      console.log(resp);
    },
  },
};
export default options;
</script>